<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=bar-tick-align
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
  <!-- 使用CDN引用jQuery，避免本地文件缺失问题 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>


<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>


<script type="text/javascript">
  // 确保DOM完全加载后执行
  $(function (){
    // 增加错误处理
    $.getJSON("/tongji/teacherTongji")
            .done(function (result) {
              // 检查返回数据格式是否正确
             // alert(JSON.stringify(result))
              if (!result || !result.data || !result.data.studentName || !result.data.score) {
                alert("数据格式错误，请检查服务器返回");
                return;
              }

              var dom = document.getElementById('container');
              var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
              });

              var option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [
                  {
                    type: 'category',
                    data: result.data.studentName,
                    axisTick: {
                      alignWithLabel: true
                    }
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series: [
                  {
                    name: '分数',  // 将名称改为更符合业务的"分数"
                    type: 'bar',
                    barWidth: '60%',
                    data: result.data.score
                  }
                ]
              };

              if (option && typeof option === 'object') {
                myChart.setOption(option);
              }

              window.addEventListener('resize', myChart.resize);
            })
            .fail(function (xhr, status, error) {
              // 处理请求失败的情况
              console.error("数据请求失败:", error);
              alert("无法加载数据，请稍后重试");
            });
  });

</script>
</body>
</html>
